<template>
    <div class="the-title-box">
        <div class="title-left-box"></div>
        <div class="title-text-box">尾矿库安全网</div>
        <div class="title-right-box"></div>
    </div>
</template>

<script>
export default {
    name: "TheTitle",
};
</script>

<style lang="scss" scoped>
.the-title-box {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: url("~@/asset/image/title-bg.png") no-repeat center top/auto;
    background-size: 100% 100%;
    color: #00fcff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    .title-left-box {
        width: 34%;
        height: 36px;
        margin-top: 45px;
        padding: 0 0 0 58px;
        border: 1px solid #2c3e50;
        border-radius: 6px;
    }

    .title-text-box {
        width: 26%;
        height: 85px;
        font-size: 45px;
        letter-spacing: 5px;
        line-height: 85px;
        //font-weight: bolder;
        text-shadow: 2px 2px 10px #00fcff;
    }

    .title-right-box {
        width: 34%;
        height: 36px;
        margin-top: 45px;
        padding: 0 5px 0 0;
        border: 1px solid #2c3e50;
        border-radius: 6px;
    }
}
</style>
